<template>
	<view class="content">
		<view class="inp">
			<input type="text" value="美发" class="inp-1" />

		</view>
		<view class="mid">
			<view class="mid-content">
				<view class="phone">
					<text>张三</text>
					<text>13812314563</text>
				</view>
				<view class="addr">
					<text>北京市朝阳区望京悠乐汇A座8011</text>
				</view>
			</view>

		</view>

		<view class="bottom">
			<scroll-view scroll-y="true">
				<view class="person" v-for="(item,index) in list" :key="index">
					<view class="face">
						<image :src="item.avatar" mode="" lazy-load="true"></image>
					</view>
					<view class="desc">
						<view class="title">
							{{item.company}}
						</view>
						<view class="name">
							<text>{{item.nickname}}</text><text class="prc">{{item.price}}</text>
						</view>
						<view class="instruction">
							{{item.message}}
						</view>
					</view>
					<view class="sec">
						{{item.distance}}
					</view>

				</view>

			</scroll-view>



		</view>


	</view>
</template>

<script>
	import * as mydata from "../../utils/data.js"
	export default {
		data() {
			return {
				list:[]
			}
		},
		methods: {
			
		},
		mounted() {
		 this.list=mydata.getSkilledData()
		 console.log(this.list)
		},
		
	}
</script>

<style>
	.inp {
		width: 100%;
		height: 100rpx;
		background-color: #EFEFF4;
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.inp-1 {
		width: 80%;
		height: 60%;
		padding: 0px 20rpx 0rpx 20rpx;
		/* border: #999999 solid 1rpx; */
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}


	/* 中间一小块设置成150px */
	.mid {
		width: 100%;
		height: 162rpx;
		background-color: #EFEFF4;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 1rpx solid #999999; */

	}

	/* 中间填上数据 */
	.mid-content {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 80%;
		height: 60%;
		padding: 0px 20rpx;
	}

	.bottom scroll-view {
		width: 100%;
		height: 846rpx;
	}

	.person {
		width: 100%;
		height: 260rpx;
		/* border: 1rpx solid #333333; */
		border-bottom:1rpx solid #333333;  ;
		display: flex;
		font-size: 28rpx;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		

	}

	.person .face {
		width: 180rpx;
		height: 180rpx;

	}

	.person image {
		width: 100%;
		height: 100%;

	}
	.desc{
		width: 400rpx;
		height: 180rpx;
		/* border: 1rpx solid #333333; */
		white-space: nowrap;
		text-overflow: ellipsis;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.sec{
		width: 120rpx;
		height: 180rpx;
		/* border: 1rpx solid #333333; */
		
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff0000;
	}
 .desc	.instruction{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	}
	.name .prc{
		color: #ff0000;
	}
</style>
